@function getRemNum($rem) {
  @return ($rem /37.5)
}

@mixin Plate-core {
  width: getRemNum(343rem);
  margin: 0 auto;
}

@mixin Word-spacing {
  letter-spacing: getRemNum(0.6rem);
}

body {
  background: #fff;
}

header {
  @include Plate-core;
  height: getRemNum(46rem);
  position: relative;
  display: flex;
  align-items: center;

  .back {
    height: getRemNum(13rem);
    width: getRemNum(13rem);
    background: url('https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/close.png') no-repeat;
    background-size: contain;
  }
}

#container {
  min-height: getRemNum(458rem);
  @include Plate-core;
  // 标题
  .title {
    p {
      font-family: PingFangSC-Medium, PingFang SC;
      font-size: getRemNum(18rem);
      letter-spacing: getRemNum(1rem);
      color: #333;
      font-weight: bold;
    }
  }

  // 发布信息
  .release-information {
    font-family: PingFangSC-Regular, PingFang SC;
    margin-top: getRemNum(12rem);
    font-size: getRemNum(12rem);

    span {
      margin-right: getRemNum(8rem);
    }

    .time, .address {
      color: #999999;
    }

    & :not(.time,.address) {
      color: #89B1FF;
    }
  }

  .body-part {
    @include Word-spacing;
    padding-bottom: getRemNum(20rem);

    p {
      font-family: PingFangSC-Regular, PingFang SC;
      font-size: getRemNum(12rem);
      color: #333333;
      line-height: getRemNum(25rem);
      margin-top: getRemNum(12rem)
    }

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      margin-top: getRemNum(12rem);
    }
  }
}

.comment-area {
  @include Word-spacing;
  background-color: #F5F5F5;
  overflow: hidden;

  .comment {
    font-family: PingFangSC-Regular, PingFang SC;
    @include Plate-core;

    .fouce {
      margin-bottom: getRemNum(16rem);
    }

    .comment-header {
      height: getRemNum(57rem);
      font-size: getRemNum(12rem);
      color: #999;
      display: flex;
      align-items: center;
      border-bottom: #D8D8D8 solid getRemNum(1rem);

      & > p {
        flex: 4;
      }

      .like {
        display: flex;
        flex: 1;

        .like-icon {
          width: getRemNum(16.13rem);
          height: getRemNum(14rem);
          background: url('https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/greylike.png') no-repeat;
          background-size: contain !important;
          margin-right: getRemNum(8rem);
          font-size: getRemNum(14rem);
        }
      }

      .forward {
        display: flex;
        align-items: center;

        .forward-icon {
          width: getRemNum(16rem);
          height: getRemNum(18rem);
          background: url('https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/forwardicon.png') no-repeat;
          background-size: cover;
          margin-right: getRemNum(8rem);
          font-size: getRemNum(14rem);
        }
      }
    }

    .comment-box {
      height: getRemNum(44rem);
      width: getRemNum(343rem);
      margin: getRemNum(16rem) auto;
      position: relative;

      .comment-box-button {
        position: absolute;
        right: getRemNum(4rem);
        bottom: getRemNum(4rem);
        width: getRemNum(56rem);
        height: getRemNum(36rem);
        background: #FFC542;
        border-radius: 6px;
        font-size: getRemNum(14rem);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        line-height: getRemNum(36rem);
        text-align: center;
        letter-spacing: getRemNum(0.88rem);
        display: none;
      }

      input {
        font-family: PingFangSC-Regular, PingFang SC;
        display: block;
        width: getRemNum(343rem);
        height: getRemNum(44rem);
        background: #FFFFFF;
        border-radius: getRemNum(8rem);
        font-size: getRemNum(12rem);
        border: 0;
        outline: 0;
        padding: 0 getRemNum(64rem) 0 getRemNum(12rem);
        box-sizing: border-box;
        line-height: getRemNum(44rem);
      }
    }

    .comment-content {
      font-size: getRemNum(12rem);
      font-family: PingFangSC-Regular, PingFang SC;

      .no-content {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: getRemNum(80rem);
        color: #D8D8D8;
        font-size: getRemNum(12rem);
        letter-spacing: getRemNum(0.6rem);
        font-family: PingFangSC-Regular, PingFang SC;

        section {
          width: getRemNum(18rem);
          height: getRemNum(18rem);
          background: url("https://19jwshow.oss-cn-shenzhen.aliyuncs.com/images/emoticon%403x.png") no-repeat;
          background-size: contain;
          margin-bottom: getRemNum(6rem);
        }
      }

      .user-comments {
        display: flex;
        justify-content: space-between;
        margin-bottom: getRemNum(16rem);

        .adult-comments-head {
          width: getRemNum(36rem);
          height: getRemNum(36rem);
          overflow: hidden;
          border-radius: getRemNum(4rem);

          p {
            width: getRemNum(36rem);
            height: getRemNum(36rem);
            background: #89B1FF;
            border-radius: getRemNum(32rem);
            line-height: getRemNum(37rem);
            text-align: center;
            font-size: getRemNum(12rem);
            letter-spacing: getRemNum(0.6rem);
            font-weight: bold;
            color: #fff;
          }

          img {
            height: 100%;
            width: 100%;
            object-fit: cover;
          }
        }

        .user-adult-comments {
          width: getRemNum(299rem);

          .adult-comments-information {
            display: flex;
            justify-content: space-between;
            color: #757575;
          }

          .adult-comments-content {
            color: #333333;
            margin: getRemNum(5rem) 0 getRemNum(8rem);
            line-height: getRemNum(20rem);
          }
        }
      }

      .user-child-reply {
        display: flex;
        justify-content: space-between;
        margin-top: getRemNum(8rem);

        .child-reply-head {
          width: getRemNum(30rem);
          height: getRemNum(30rem);
          overflow: hidden;
          border-radius: getRemNum(8rem);
          p {
            width: getRemNum(30rem);
            height: getRemNum(30rem);
            background: #89B1FF;
            border-radius: getRemNum(32rem);
            line-height: getRemNum(30rem);
            text-align: center;
            letter-spacing: getRemNum(0.6rem);
            font-size: getRemNum(10rem);
            font-weight: bold;
            color: #fff;
          }
          img {
            height: 100%;
            width: 100%;
            object-fit: cover;
          }
        }

        .child-reply {
          width: getRemNum(259rem);

          .child-reply-name {
            color: #999;
          }

          .child-reply-content {
            color: #333333;
            margin: getRemNum(5rem) 0 getRemNum(8rem);
          }
        }
      }
    }
  }
}

.reply-comment {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .reply-comment-box {
    position: absolute;
    bottom: 0;
    width: getRemNum(375rem);
    height: getRemNum(48rem);
    padding: getRemNum(7rem) getRemNum(16rem);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    background: #fff;

    input {
      width: getRemNum(273rem);
      height: getRemNum(34rem);
      background: #F5F5F5;
      padding-left: getRemNum(12rem);
      box-sizing: border-box;
      border: none;
      outline: none;
      border-radius: getRemNum(6rem);
      font-size: getRemNum(14rem);
      font-family: PingFangSC-Medium, PingFang SC;
      letter-spacing: getRemNum(0.88rem);
    }

    button {
      width: getRemNum(62rem);
      height: getRemNum(34rem);
      border: none;
      background: #FFC542;
      border-radius: getRemNum(6rem);
      color: #fff;
      font-size: getRemNum(14rem);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      letter-spacing: getRemNum(0.88rem);
    }
  }
}

.share-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .08);
  display: none;

  .share-box-text {
    width: getRemNum(271rem);
    min-height: getRemNum(170rem);
    background: #fff;
    border-radius: getRemNum(12rem);
    padding: getRemNum(21rem) getRemNum(16rem);
    box-sizing: border-box;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .share-box-text-header {
      height: getRemNum(32rem);
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: getRemNum(14rem);
      font-family: PingFangSC-Regular, PingFang SC;
      color: #161516;
      letter-spacing: getRemNum(0.7rem);
    }

    .share-box-text-content {
      width: getRemNum(239rem);
      font-size: getRemNum(12rem);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: #161516;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      margin: getRemNum(16rem) 0;
      overflow: hidden;
    }

    .share-box-text-information {
      margin-top: getRemNum(86rem);

      .share-box-text-username {
        font-size: getRemNum(14rem);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: bold;
        color: #161516;
        margin-bottom: getRemNum(4rem);
      }

      & > section:nth-child(2) {
        display: flex;
        justify-content: space-between;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999999;
        font-size: getRemNum(12rem);

        .share-box-text-time {
          letter-spacing: getRemNum(0.6rem);
        }

        .share-box-text-address {
          width: getRemNum(71rem);
          text-align: center;
        }
      }
    }

    .share-box-text-QRcode {
      position: absolute;
      right: getRemNum(16rem);
      bottom: getRemNum(60rem);
      width: getRemNum(68rem);
      height: getRemNum(68rem);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .share-box-images {
    width: getRemNum(275rem);
    height: getRemNum(449rem);
    background: #fff;
    border-radius: getRemNum(12rem);
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: getRemNum(12rem);
    padding: getRemNum(21rem) getRemNum(18rem);
    box-sizing: border-box;

    .share-box-images-header {
      height: getRemNum(32rem);
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: getRemNum(14rem);
      font-family: PingFangSC-Regular, PingFang SC;
      color: #161516;
      letter-spacing: getRemNum(0.7rem);
    }

    .share-box-images-content-image {
      margin: getRemNum(16rem) 0;
      width: getRemNum(239rem);
      height: getRemNum(239rem);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .share-box-images-content-text p {
      width: getRemNum(145rem);
      height: getRemNum(51rem);
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      font-size: getRemNum(12rem);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: #161516;
      line-height: getRemNum(17rem);
    }

    .share-box-images-information {
      margin: getRemNum(18rem) 0 0;

      .share-box-images-username {
        font-size: getRemNum(14rem);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: bold;
        color: #161516;
        margin-bottom: getRemNum(4rem);
      }


      & > section:nth-child(2) {
        display: flex;
        justify-content: space-between;

        .share-box-images-time {
          font-size: getRemNum(12rem);
          font-family: PingFangSC-Regular, PingFang SC;
          color: #999999;
          letter-spacing: getRemNum(0.6rem);
        }

        .share-box-images-address {
          width: getRemNum(68rem);
          font-size: getRemNum(12rem);
          text-align: center;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #999999;
          letter-spacing: getRemNum(0.6rem);
        }
      }
    }

    .share-box-images-QRcode {
      position: absolute;
      right: getRemNum(18rem);
      bottom: getRemNum(53rem);
      width: getRemNum(68rem);
      height: getRemNum(68rem);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
